<script setup>
import { ref, onMounted } from 'vue'
import { getManuscriptListApi, DeleteManuscriptListApi } from '@/api/manuscript'
import { ElMessage } from 'element-plus'
import Page from '@/components/page/Page.vue'
const username = ref('')
const phone = ref('')
const year = ref(new Date().getFullYear())
const month = ref(new Date().getMonth() + 1)
const id = ref(0)
const tableData = ref([])
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
const deleletDialog = ref(false)


// 方法区
const pageChange = (size, num) => {
    console.log(size, num)
    pageSize.value = size
    pageNum.value = num
    gettableData()
}
const gettableData = async () => {
    const res = await getManuscriptListApi({
        username: username.value,
        phone: phone.value,
        year: year.value,
        month: month.value,
        pageNum: pageNum.value,
        pageSize: pageSize.value
    })
    tableData.value = res.data.rows
    total.value = res.data.total
    console.log(res.data.total)
}

//打开删除对话框
const openDeleteDialog = (userId) => {
    deleletDialog.value = true
    id.value = userId
}

//删除用户请求
const deleletUserRequest = async () => {
    const res = await DeleteManuscriptListApi(id.value)
    res.code == '1' ? ElMessage.success('删除成功') : ElMessage.error('删除失败')
    gettableData()
    deleletDialog.value = false

}

onMounted(async () => {
    gettableData()
})

</script>

<template>
    <div style="padding: 20px;background-color: aliceblue; width: 95%;margin: 0 auto;">
        <div>
            姓名：<el-input v-model="username" style="width: 200px;margin-right: 30px;" placeholder="请输入" />
            电话：<el-input v-model="phone" style="width: 200px;margin-right: 30px;" placeholder="请输入" />
            年：<el-input v-model="year" type="number" placeholder="请输入年"
                style="width: 200px;margin-right: 30px;"></el-input>
            月：<el-input v-model="month" type="number" placeholder="请输入月"
                style="width: 200px;margin-right: 30px;"></el-input>
            <el-button type="primary" @click="gettableData">查询</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%;margin-top: 40px;margin-bottom: 40px;height: 550px;">
            <el-table-column prop="username" label="用户名" width="180" fixed="left" />
            <el-table-column prop="media" label="刊发媒体" width="180">
                <template #default="scope">
                    <span v-if="scope.row.media == 1">湖南日报</span>
                    <span v-if="scope.row.media == 2">新湖南</span>
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="电话" width="180" />
            <el-table-column prop="title" label="稿件标题" width="180" />
            <el-table-column prop="type" label="体裁类型" width="180" />
            <el-table-column prop="publishColumn" label="刊发栏目" width="180" />
            <el-table-column prop="hitsNum" label="点击量" width="180" />
            <el-table-column prop="isPicture" label="是否配图" width="180">
                <template #default="scope">
                    <span v-if="scope.row.isPicture">是</span>
                    <span v-else>否</span>
                </template>
            </el-table-column>
            <el-table-column prop="isVideo" label="是否配视频" width="180">
                <template #default="scope">
                    <span v-if="scope.row.isVideo">是</span>
                    <span v-else>否</span>
                </template>
            </el-table-column>
            <el-table-column prop="grade" label="是否获得当日等级稿" width="180" />
            <el-table-column prop="thirdPlatform" label="是否在第三方平台上稿" width="180" />
            <el-table-column prop="isHoliday" label="是否由领导安排节假日，双休日重大采访" width="180">
                <template #default="scope">
                    <span v-if="scope.row.isHoliday">是</span>
                    <span v-else>否</span>
                </template>
            </el-table-column>
            <el-table-column prop="unitNum" label="联合署名人数" width="180" />
            <el-table-column prop="authorGrade" label="是第几作者" width="180" />
            <el-table-column prop="upTime" label="发布时间" width="180" />
            <el-table-column prop="createTime" label="创建时间" width="180">
                <template #default="scope">
                    {{ scope.row.createTime.replace('T', ' ') }}
                </template>
            </el-table-column>
            <el-table-column prop="sumScore" label="分数总和" width="180" fixed="right" />
            <el-table-column label="操作" fixed="right">
                <template #default="scope">
                    <el-button type="danger" @click="openDeleteDialog(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <Page @change="pageChange" :pageNum="pageNum" :pageSize="pageSize" :total="total" v-if="total > 10" />
    </div>

    <!-- 删除对话框 -->
    <el-dialog v-model="deleletDialog" title="删除用户信息" width="500">
        <template #footer>
            <el-button @click="deleletDialog = false">取消</el-button>
            <el-button type="primary" @click="deleletUserRequest()">
                确定
            </el-button>
        </template>
    </el-dialog>
</template>

<style lang="less" scoped></style>